<template>
	<el-container :direction="vertical">
		<my-header title="考试列表"></my-header>
		<el-main>
			<!-- 查询按钮 -->
			<el-header>
				<!-- 题型 -->
				<el-select
					v-model="selectList.questiontypes"
					placeholder="题型"
					clearable
					filterable
					class="margin-left-10"
				>
					<el-option
						v-for="item in questionTypeList"
						:key="item.testquestionsuuid"
						:label="item.testquestionsname"
						:value="item.typesnum"
					>
					</el-option>
				</el-select>
				<!-- 科目 -->
				<el-select
					v-model="selectList.typenum"
					placeholder="科目"
					clearable
					filterable
					class="margin-left-10"
				>
					<el-option
						v-for="item in subjectList"
						:key="item.subjectuuid"
						:label="item.subjectname"
						:value="item.subjecttypes"
					>
					</el-option>
				</el-select>
				<!-- 难易程度 -->
				<el-select
					v-model="selectList.difficultytypes"
					placeholder="难易程度"
					clearable
					filterable
					class="margin-left-10"
				>
					<el-option
						v-for="item in difficultyList"
						:key="item.stageuuid"
						:label="item.stagename"
						:value="item.stagetypes"
					>
					</el-option>
				</el-select>

				<!-- 查询按钮 -->
				<el-button
					type="primary"
					size="small"
					@click="handleSelect"
					class="margin-left-10"
					>查询</el-button
				>
			</el-header>

			<el-container :direction="vertical">
				<!-- 数据表格 -->
				<el-table :data="questionList" border stripe class="text-center">
					<el-table-column type="selection" label="全选" width="50">
					</el-table-column>
					<el-table-column
						type="index"
						label="编号"
						width="50"
						:index="indexMethod"
					>
					</el-table-column>
					<el-table-column label="题干" prop="filltopic"> </el-table-column>
					<el-table-column label="题型" width="80">
						<template slot-scope="scope">
							<!-- scope 代表表格绑定数组 -->
							<!-- scope.row 绑定数组的元素 -->
							{{ scope.row.questiontypes | filterQuestionTypes(that) }}
						</template>
					</el-table-column>
					<el-table-column label="科目" width="80">
						<template slot-scope="scope">
							{{ scope.row.typenum | filterSubjectTypes(that) }}
						</template>
					</el-table-column>
					<el-table-column label="难易程度" width="80">
						<template slot-scope="scope">
							{{ scope.row.difficultytypes | filterDifficultyTypes(that) }}
						</template>
					</el-table-column>
					<el-table-column label="创建时间" prop="createtime" width="160">
					</el-table-column>
					<el-table-column label="操作" width="150">
						<el-button type="success" size="mini">查看</el-button>
						<span> | </span>
						<el-button type="primary" size="mini">修改</el-button>
					</el-table-column>
					<el-table-column label="删除" width="80">
						<el-button type="danger" size="mini">删除</el-button>
					</el-table-column>
				</el-table>

				<!-- 分页器 -->
				<el-pagination
					class="margin-top-20 text-center"
					@size-change="sizeChange"
					@current-change="currentChange"
					:current-page.sync="pageNum"
					:page-sizes="[10, 30, 50]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					background
				>
				</el-pagination>
			</el-container>
		</el-main>
	</el-container>
</template>

<script>
import MyHeader from "@/components/admin/Header.vue"
export default {
	components: {
		MyHeader
	},
	data() {
		return {
			that: this,
			vertical: 'vertical',
			questionTypeList: [], // 题型列表
			subjectList: [], // 科目列表
			difficultyList: [], // 难易程度列表
			questionList: [], // 试题列表
			total: 0, // 试题总数
			pageNum: 1, // 当前页码
			pageSize: 10, // 每页显示数量
			selectList: {},
		}
	},
	filters: {
		// 过滤题型
		filterQuestionTypes(type, that) {
			// that是 vue组件 实例
			for (let i = 0; i < that.questionTypeList.length; i++) {
				// typesnum是试题类型
				if (type == that.questionTypeList[i].typesnum) {
					// testquestionsname 类型对应的名称
					return that.questionTypeList[i].testquestionsname;
				}
			}
		},
		// 过滤科目
		filterSubjectTypes(type, that) {
			// that是 vue组件 实例
			for (let i = 0; i < that.subjectList.length; i++) {
				// typesnum是试题类型
				if (type == that.subjectList[i].subjecttypes) {
					// testquestionsname 类型对应的名称
					return that.subjectList[i].subjectname;
				}
			}
		},
		// 过滤难易程度
		filterDifficultyTypes(type, that) {
			// that是 vue组件 实例
			for (let i = 0; i < that.difficultyList.length; i++) {
				// typesnum是试题类型
				if (type == that.difficultyList[i].stagetypes) {
					// testquestionsname 类型对应的名称
					return that.difficultyList[i].stagename;
				}
			}
		}
	},
	async created() {
		// 获取数据：题型、科目、难易程度
		await this.getQuestionTypeList();
		await this.getSubjectList();
		await this.getDifficutyList();

		// 获取试题列表
		await this.getQuestionList();
	},
	methods: {
		// 获取题型列表
		async getQuestionTypeList() {
			await this.$axios({
				url: "/system/sqTestquestionstypes/selTestquestions",
				method: "get"
			}).then(res => {
				if (res.data.code === 1) {
					this.questionTypeList = res.data.data;
				}
			})
		},
		// 获取所属科目
		async getSubjectList() {
			await this.$axios({
				url: "/system/sqSubjecttable/selSubject",
				method: "get"
			}).then(res => {
				if (res.data.code === 1) {
					this.subjectList = res.data.data;
				}
			})
		},
		// 获取题目的难易程度
		async getDifficutyList() {
			await this.$axios({
				url: "/system/sqStagetypes/selstagetypes",
				method: "get",
			}).then(res => {
				if (res.data.code === 1) {
					this.difficultyList = res.data.data;
				}
			})
		},
		// 获取试题列表
		async getQuestionList(pageNum = 1, pageSize = 10) {
			let selectStr = "";
			// 拼接查询条件
			selectStr += `?pageNum=${pageNum}&pageSize=${pageSize}&`;
			// this.selectList 是对象
			for (let key in this.selectList) {
				// 有查询条件
				if (this.selectList[key]) {
					// 拼接查询条件 ?pageNum=1&pageSize=10&typenum=2&questiontypes=1&difficutytypes=2
					selectStr += `${key}=${this.selectList[key]}&`
				}
			}
			console.log(selectStr)
			await this.$axios({
				url: `/system/sqTestquestionstypes/selectByConditionshortanswer${selectStr}`,
				method: "get"
			}).then(res => {
				console.log(res.data.data)
				// res.data.code 值为1 ，后台响应正确结果
				if (res.data.code === 1) {
					this.questionList = res.data.data.allNums;
					this.total = res.data.data.total;
				}
			})
		},
		// 表格自定义编号，第一页从1开始，第二页从11开始...
		indexMethod(index) {
			// index 是数组的索引
			// 1   0 * pageSize +  index + 1
			// 11  1 * pageSize + (index+1)
			// 21	 2 * pageSize + (index+1)
			// (pageNum-1) * pageSize+ (index+1)
			return (this.pageNum - 1) * this.pageSize + (index + 1);
		},
		// 按条件查询
		handleSelect() {
			// console.log(this.selectList);
			this.getQuestionList(this.pageNum, this.pageSize);
		},
		// 每页显示总条数变化
		sizeChange(val) {
			// val 当前每页显示数据条数
			this.pageSize = val;
			// 调取数据
			this.getQuestionList(this.pageNum, this.pageSize);
		},
		// 页码发生变化
		currentChange(currentPage) {
			// currentPage 当前页码
			this.pageNum = currentPage;
			// 调取数据
			this.getQuestionList(this.pageNum, this.pageSize)
		}
	}
}
</script>

<style lang="scss" scoped>
</style>